<template>
    <div>
        <div id="water" style="width: 100%;height:326px;"></div>
    </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
    props: {
        keyItem: Object
    },
    data(){
        return{
            timeLists:[],
            dataList:[],
            myChart:'',
            lists:{
                T_In_Valve:{
                    name:"进阀温度",
                    unit:'℃'
                },
                T_Out_Valve:{
                    name: "出阀温度",
                    unit:'℃'
                },
                F_Of_CW:{
                    name: "冷却水流量",
                    unit:'L/s'
                },
                P_In_Valve:{
                    name:"进阀压力",
                    unit:'MPa'
                },
                P_Out_Valve:{
                    name:"出阀压力",
                    unit:'MPa'
                },
                L_In_Tank:{
                    name:"膨胀罐液位",
                    unit:'%'
                },
                P_In_Tank:{
                    name:"膨胀罐压力",
                    unit:'MPa'
                },
                L_rep_Tank:{
                    name:"补水罐液位",
                    unit:'%'
                },
                CW_Conduct:{
                    name:"冷却水电导率",
                    unit:'μs/cm'
                },
                DW_Conduct:{
                    name:"去离子水电导率",
                    unit:'μs/cm'
                },
                F_Of_DW:{
                    name:"去离子水流量",
                    unit:'L/s'
                },
                VB01_Feedback:{
                    name:"VB01电动比例阀开度",
                    unit:'%'
                },
                VB02_Feedback:{
                    name:"VB02电动比例阀开度",
                    unit:'%'
                },
                T_Of_H01:{
                    name:"H01电加热器温度",
                    unit:'℃'
                },
                T_Of_H02:{
                    name:"H02电加热器温度",
                    unit:'℃'
                },
                T_Of_H03:{
                    name:"H03电加热器温度",
                    unit:'℃'
                },
                P01currentA:{
                    name:"P01主泵电机电流",
                    unit:'A'
                },
                P02currentA:{
                    name:"P02主泵电机电流",
                    unit:'A'
                },
                L_Buffer_Pool:{
                    name:"缓冲水池液位",
                    unit:'%'
                },
                BP_Conduct:{
                    name:"喷淋水电导率",
                    unit:'μs/cm'
                },
                Freq_M01_Feedback:{
                    name:"M01风机运行频率",
                    unit:'Hz'
                },
                Freq_M02_Feedback:{
                    name:"M02风机运行频率",
                    unit:'Hz'
                },
                Freq_M03_Feedback:{
                    name:"M03风机运行频率",
                    unit:'Hz'
                },
                Freq_M04_Feedback:{
                    name:"M04风机运行频率",
                    unit:'Hz'
                },
                Freq_M05_Feedback:{
                    name:"M05风机运行频率",
                    unit:'Hz'
                },
                Freq_M06_Feedback:{
                    name:"M06风机运行频率",
                    unit:'Hz'
                },
                Freq_E5_P01_Feedback:{
                    name:"P01高压泵运行频率",
                    unit:'Hz'
                },
                P_In_E5_PT01:{
                    name:"PT01高压泵进水压力",
                    unit:'MPa'
                },
                P_Out_E5_PT02:{
                    name:"PT02高压泵出水压力",
                    unt:'MPa'
                },
                P_In_E5_PT03:{
                    name:"PT03反渗透二段膜组件进水压力",
                    unit:'MPa'
                },
                P_In_E5_PT04:{
                    name:"PT04反渗透三段膜组件进水压力",
                    unit:'MPa'
                },
                P_discharge_E5_PT05:{
                    name:"PT05反渗透浓水排放压力",
                    unit:'MPa'
                },
                QIT01_Conduct:{
                    name:"QIT01反渗透入水电导率",
                    unit:'μS/cm'
                },
                QIT02_Conduct:{
                    name:"QIT02反渗透产水电导率",
                    unit:'μS/cm'
                },
                F_Of_FIT01:{
                    name:"FIT01反渗透产水流量",
                    unit:'m3/h'
                },
                ORPO_electric:{
                    name:"ORP0氧化还原电位",
                    unit:'mV'
                },
                F_Of_FIT02:{
                    name:"FIT02反渗透浓水流量",
                    unit:'m3/h'
                },
                T_In_Hall:{
                    name:"阀厅温度",
                    unit:'℃'
                },
                H_In_Hall:{
                    name:"阀厅湿度",
                    unit:'%'
                },
                Envi_temp:{
                    name:"室外温度",
                    unit:'%'
                },
                T_Condensation:{
                    name:"凝露温度",
                    unit:'%'
                }
            },
        }
    },
    mounted(){
        
    },
    computed: {
        ...mapState({
            realTimeData : state => state.realTimeData
        })
    },
    watch:{
        realTimeData(val){
            this.lineData = val
            if(this.lineData.length > 0){
                this.dealDate(this.lineData)
            }else{
                this.myChart = ''
            }
        },
    },
    methods:{
        getTime(time){
            let b = time.split(' ')
            return b[1]
        },
         //处理图表数据
      dealDate(data){
        this.dataList=[]
        this.timeLists=[]
        if(data && data.length > 0){
          for(let i=0;i<data.length;i++){
            let item = data[i]
            this.timeLists.push(this.getTime(item.time))
            this.dataList.push(item[this.keyItem.key].real)
          }
        }
        setTimeout(() => {
            
            if(this.myChart){
                this.refreshData()
            }else{
                // 基于准备好的dom，初始化echarts实例
                this.myChart = this.$echarts.init(document.getElementById('water'))
                // 绘制图表
                this.myChart.setOption(this.options());
            }
        })
        
      },
      refreshData(){
            
            //刷新数据
            var option = this.myChart.getOption();
            option.xAxis[0].data = this.timeLists
            option.xAxis[0].axisLabel.interval = parseInt(this.timeLists.length/5)
            option.series[0].data = this.dataList;

            this.myChart.setOption(option);    
        },
        options() {
            const unit = this.lists[this.keyItem.key].unit
            const _self = this
            let option = {
                title: {
                    text: this.keyItem.label + ' ' + unit,
                    textStyle:{
                        color:"#FFFFFF",
                        fontSize:14
                    },
                },
                xAxis: {
                    type: 'category',
                    data: this.timeLists,
                    boundaryGap:true,
                    axisLabel:{  
                        interval: parseInt(_self.timeLists.length/5),  //控制坐标轴刻度标签的显示间隔.设置成 0 强制显示所有标签。设置为 1，隔一个标签显示一个标签。设置为2，间隔2个标签。以此类推
                        rotate:0,//倾斜度 -90 至 90 默认为0 
                        textStyle:{ 
                            fontWeight:"400",  //加粗
                            color:"#ffffff",   //黑色
                            width:"30px",
                        },                 
                    },
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '80',
                    bottom: '50',
                },
                dataZoom:[
                    {
                        type:"inside",//slider表示有滑动块的，
                        show:false,
                        xAxisIndex:[0],//表示x轴折叠
                        // zoomLock:true,
                        start:0,//数据窗口范围的起始百分比,表示1%
                        end:100//数据窗口范围的结束百分比,表示35%坐标
                    }
                ],
                
                yAxis: {
                    type: 'value',
                    splitLine: { //网格线
                        show: false
                    }
                },
                series: [{
                    data: this.dataList,
                    name:'水流量',
                    type: 'line',
                    itemStyle : { 
                        normal : { 
                            color:'#ffa500', //改变折线点的颜色
                            lineStyle:{ 
                                color:'#ffa500' //改变折线颜色
                            } 
                        } 
                    }
                }]
            };
            
            return option
        }
    }
}
</script>
